<template>
	<view class="page">
		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status">
				<text class="iconfont icon-zhuyi"></text>
				<text v-if="orderdetail.status === 10">待付款</text>
				<text v-if="orderdetail.status === 20">待发货</text>
				<text v-if="orderdetail.status === 30">待收货</text>
				<text v-if="orderdetail.status === 40">待评价</text>
			</view>
			<view class="reason" v-show="orderdetail.status == 10">
				<text>剩余{{msg}}</text>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="shipping-address">
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>{{address.consignee}}</text>
				<text>{{address.phone}}</text>
			</view>
			<view class="address">
				<text>{{address.area_text}}{{address.address}}</text>
			</view>
		</view>
		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in orderdetail.product" :key="index">
					<view class="thumb">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{item.name}}</text>
						</view>
						<view class="num-size">
							<text>数量：{{item.num}}</text>
							<text>颜色：黑色,XL,全国联保</text>
						</view>
						<view class="price">
							<text>￥{{item.price}}</text>
						</view>
						<view class="order-btn">
							<view class="btn" @click="onApplyAftersales">
								<text>申请售后</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="contact">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list">
					<view class="title">订单编号:</view>
					<view class="content">
						<text>{{orderdetail.orderid}}</text>
						<text class="btn">复制</text>
					</view>
				</view>
				<view class="list">
					<view class="title">下单时间:</view>
					<view class="content">
						<text>{{orderdetail.createtime}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">支付方式:</view>
					<view class="content">
						<text>在线支付</text>
					</view>
				</view>
				<view class="list">
					<view class="title">配送方式:</view>
					<view class="content">
						<text>普通快递</text>
					</view>
				</view>
				<view class="list">
					<view class="title">配送日期:</view>
					<view class="content">
						<text>2020-11-11</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				<view class="list">
					<view class="title">
						<text>商品总额</text>
					</view>
					<view class="price">
						<text>￥{{orderdetail.totalPrice}}.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text>+￥20.00</text>
					</view>
				</view>
				<view class="list action">
					<view class="title">
						<text>实付款：</text>
					</view>
					<view class="price">
						<text>￥{{orderdetail.totalPrice}}.00</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-btn">
			<view class="del">
				<text>删除订单</text>
			</view>
			<view class="btn">
				<text>查看发票</text>
				<text class="action">确认付款</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderid:'',
				orderdetail:[],//订单详情数据
				address:{},//收货地址
				msg:'',//时间
				createtime: '', //下单时间
				overduetime: 30, //过期时间
			};
		},
		onLoad(option) {
			console.log(option)
			let data = option.orderId;
			this.orderid = data;
			this.getOrderDetail(data)
		},
		methods:{
			//查询订单数据
			getOrderDetail(data){
				console.log(data)
				this.$api.order.getOrder({
					data:data
				}).then((res) => {
					console.log(res)
					let item = res.data[0]
					this.address = item.address[0];
					
					item.product.forEach((item,index,arr)=>{
						arr[index] = JSON.parse(item)
					})
					this.$url(item.product,'img')
					this.orderdetail = item
					console.log(this.orderdetail)
					this.createtime = item.createtime // 下单开始的时间
					this.countdown(); // 调用倒计时
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			/**
			 * 倒计时
			 */
			countdown() {
				var _that = this
				var now = new Date(_that.createtime.replace(/-/g, '/')); //处理开始时间    这个方法兼容大多数浏览器以及h5手机端
				var minutes = Number(_that.overduetime); //处理输入的过期时间
				var end = now.setMinutes(now.getMinutes() + _that.overduetime); //计算最后时间
				var time_now = new Date().getTime(); //当前时间
				var msec = end - time_now; //最后时间-当前时间
				if (msec > 0) {
					let day = parseInt(msec / 1000 / 60 / 60 / 24)
					let hr = parseInt(msec / 1000 / 60 / 60 % 24)
					let min = parseInt(msec / 1000 / 60 % 60)
					let sec = parseInt(msec / 1000 % 60)
					day = day
					hr = hr > 9 ? hr : '0' + hr
					min = min > 9 ? min : '0' + min
					sec = sec > 9 ? sec : '0' + sec,
						this.msg = min + "分" + sec + "秒";
						console.log(min + "分" + sec + "秒")
				} else {
					clearInterval(tim);
					if (_that.min == '0' && _that.sec == '0') {
						window.webkit.messageHandlers.backToOc.postMessage({});
						// 						this.$router.push('/Assets')
					}
					return;
				}
				var tim = setTimeout(function() {
					_that.countdown()
				}, 1000)
			
			},
			/**
			 * 售后点击
			 */
			onApplyAftersales(){
				console.log('进入')
				uni.navigateTo({
					url: '/pages/AfterSaleType/AfterSaleType',
				})
			}
		},
		onBackPress(){
			//停止执行
			if(this.orderdetail.status == 10){
				this.overduetime = 0;
				clearTimeout(this.countdown)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
</style>
